{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>多选和单选</li>
  </ol>
<section class="demo-section">
<div id="pageContent">




















<section><header><h3>默认外观</h3></header><article><h4>多选框</h4><p>复选框（checkbox）允许用户选择多个选项，不同于 <code>&lt;select&gt;</code>，这些选项是直接展示的。</p><p>为 <code>&lt;input type="checkbox"&gt;</code> 设置 <code>disabled</code> 属性来应用禁用样式，如果为 <code>.checkbox</code> 添加 <code>disabled</code> 类，则整个复选框包括文字部分都会应用禁用样式。</p><p>将多个复选框堆叠形成一个复选框组。</p><div class="example">
  <div class="checkbox">
    <label>
      <input type="checkbox"> 复选框 1
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> 复选框 2
    </label>
  </div>
  <div class="checkbox disabled">
    <label>
      <input disabled="" type="checkbox"> 被禁用的复选框
    </label>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="tag">&gt;</span><span class="pln"> 复选框 1
  </span><span class="tag">&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="tag">&gt;</span><span class="pln"> 复选框 2
  </span><span class="tag">&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"checkbox disabled"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">disabled</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="tag">&gt;</span><span class="pln"> 被禁用的复选框
  </span><span class="tag">&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><h4>单选框</h4><p>单选框（radio）与复选框不同之处在于同一组的单选框只能选中其中一个。</p><p>与复选框类似，可以通过 <code>disabled</code> 属性和 <code>disabled</code> 类来添加禁用样式。</p><p>将多个单选框堆叠形成一个单选框组。</p><div class="example">
  <div class="radio">
    <label>
      <input type="radio" name="radioOptionsExample1"> 单选框 1
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="radioOptionsExample1"> 单选框 2
    </label>
  </div>
  <div class="radio disabled">
    <label>
      <input disabled="" type="radio" name="radioOptionsExample1"> 被禁用的单选框
    </label>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"radio"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"radio"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"radioOptionsExample"</span><span class="tag">&gt;</span><span class="pln"> 单选框 1
  </span><span class="tag">&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"radio"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"radio"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"radioOptionsExample"</span><span class="tag">&gt;</span><span class="pln"> 单选框 2
  </span><span class="tag">&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"radio disabled"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">disabled</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"radio"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"radioOptionsExample"</span><span class="tag">&gt;</span><span class="pln"> 被禁用的单选框
  </span><span class="tag">&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><h4>不包括文字内容的复选框和单选框</h4><p>如果不在 <code>&lt;label&gt;</code> 内包含任何文本则可以得到一个没有文字内容的复选框或单选框。这种用法适合少数情况，例如为表格添加一个复选框的列。</p><div class="row example">
  <div class="col-xs-6">
    <div class="checkbox">
      <label>
        <input type="checkbox">
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox">
      </label>
    </div>
    <div class="checkbox disabled">
      <label>
        <input disabled="" type="checkbox">
      </label>
    </div>
  </div>
  <div class="col-xs-6">
    <div class="radio">
      <label>
        <input type="radio" name="radioOptionsExample2">
      </label>
    </div>
    <div class="radio">
      <label>
        <input type="radio" name="radioOptionsExample2">
      </label>
    </div>
    <div class="radio disabled">
      <label>
        <input disabled="" type="radio" name="radioOptionsExample2">
      </label>
    </div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span><span class="pln">

</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"radio"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;label&gt;</span><span class="pln">
    </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"radio"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"radioOptionsExample"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>









<section><header><h3>内联形式</h3></header><article><p>有时将多个复选框或单选框放置在一行显示比较好。这时只需要为 <code>&lt;label&gt;</code> 添加 <code>checkbox-inline</code> 或 <code>radio-inline</code> 类即可，不需要额外的 <code>&lt;div&gt;</code> 来包裹 <code>&lt;label&gt;</code>。</p><h4>内联多选框</h4><div class="example">
  <label class="checkbox-inline">
    <input type="checkbox"> 多选框 1
  </label>
  <label class="checkbox-inline">
    <input type="checkbox"> 多选框 2
  </label>
  <label class="checkbox-inline">
    <input disabled="" type="checkbox"> 被禁用的多选框
  </label>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"checkbox-inline"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="tag">&gt;</span><span class="pln"> 多选框 1
</span><span class="tag">&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"checkbox-inline"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="tag">&gt;</span><span class="pln"> 多选框 2
</span><span class="tag">&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"checkbox-inline"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">disabled</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="tag">&gt;</span><span class="pln"> 被禁用的多选框
</span><span class="tag">&lt;/label&gt;</span></code></pre><h4>内联单选框</h4><div class="example">
  <label class="radio-inline">
    <input type="radio" name="radioOptionsExample3"> 单选框 1
  </label>
  <label class="radio-inline">
    <input type="radio" name="radioOptionsExample3"> 单选框 2
  </label>
  <label class="radio-inline">
    <input disabled="" type="radio" name="radioOptionsExample3"> 被禁用的单选框
  </label>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"radio-inline"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"radio"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"radioOptionsExample"</span><span class="tag">&gt;</span><span class="pln"> 单选框 1
</span><span class="tag">&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"radio-inline"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"radio"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"radioOptionsExample"</span><span class="tag">&gt;</span><span class="pln"> 单选框 2
</span><span class="tag">&lt;/label&gt;</span><span class="pln">
</span><span class="tag">&lt;label</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"radio-inline"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">disabled</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"radio"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"radioOptionsExample"</span><span class="tag">&gt;</span><span class="pln"> 被禁用的单选框
</span><span class="tag">&lt;/label&gt;</span></code></pre></article></section>










<section><header><h3>高级外观</h3></header><article><p>高级外观的多选和单选框使用自定义的外观代替原生外观，在所有浏览器都具有一致的体验。</p><div class="example">
<div class="checkbox-primary"><input type="checkbox" id="primaryCheckbox1"><label for="primaryCheckbox1">未选中</label></div>
<div class="checkbox-primary"><input type="checkbox" checked="checked" id="primaryCheckbox2"><label for="primaryCheckbox2">选中</label></div>
<div class="checkbox-primary"><input type="checkbox" checked="checked" disabled="disabled" id="primaryCheckbox3"><label for="primaryCheckbox3">禁用</label></div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"checkbox-primary"</span><span class="tag">&gt;&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"primaryCheckbox1"</span><span class="tag">&gt;&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"primaryCheckbox1"</span><span class="tag">&gt;</span><span class="pln">未选中</span><span class="tag">&lt;/label&gt;&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"checkbox-primary"</span><span class="tag">&gt;&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">checked</span><span class="pun">=</span><span class="atv">"checked"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"primaryCheckbox2"</span><span class="tag">&gt;&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"primaryCheckbox2"</span><span class="tag">&gt;</span><span class="pln">选中</span><span class="tag">&lt;/label&gt;&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"checkbox-primary"</span><span class="tag">&gt;&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"checkbox"</span><span class="pln"> </span><span class="atn">checked</span><span class="pun">=</span><span class="atv">"checked"</span><span class="pln"> </span><span class="atn">disabled</span><span class="pun">=</span><span class="atv">"disabled"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"primaryCheckbox3"</span><span class="tag">&gt;&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"primaryCheckbox3"</span><span class="tag">&gt;</span><span class="pln">禁用</span><span class="tag">&lt;/label&gt;&lt;/div&gt;</span></code></pre><div class="example">
<div class="radio-primary"><input type="radio" name="primaryRadioGroup1" id="primaryradio1"><label for="primaryradio1">选项一</label></div>
<div class="radio-primary"><input type="radio" name="primaryRadioGroup1" checked="checked" id="primaryradio2"><label for="primaryradio2">选项二</label></div>
<div class="radio-primary"><input type="radio" name="primaryRadioGroup1" checked="checked" id="primaryradio3"><label for="primaryradio3">选项三</label></div>
<div class="radio-primary"><input type="radio" name="primaryRadioGroup1" checked="checked" disabled="disabled" id="primaryradio4"><label for="primaryradio4">禁用</label></div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"radio-primary"</span><span class="tag">&gt;&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"radio"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"primaryRadioGroup1"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"primaryradio1"</span><span class="tag">&gt;&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"primaryradio1"</span><span class="tag">&gt;</span><span class="pln">选项一</span><span class="tag">&lt;/label&gt;&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"radio-primary"</span><span class="tag">&gt;&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"radio"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"primaryRadioGroup1"</span><span class="pln"> </span><span class="atn">checked</span><span class="pun">=</span><span class="atv">"checked"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"primaryradio2"</span><span class="tag">&gt;&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"primaryradio2"</span><span class="tag">&gt;</span><span class="pln">选项二</span><span class="tag">&lt;/label&gt;&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"radio-primary"</span><span class="tag">&gt;&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"radio"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"primaryRadioGroup1"</span><span class="pln"> </span><span class="atn">checked</span><span class="pun">=</span><span class="atv">"checked"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"primaryradio3"</span><span class="tag">&gt;&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"primaryradio3"</span><span class="tag">&gt;</span><span class="pln">选项三</span><span class="tag">&lt;/label&gt;&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"radio-primary"</span><span class="tag">&gt;&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"radio"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"primaryRadioGroup1"</span><span class="pln"> </span><span class="atn">checked</span><span class="pun">=</span><span class="atv">"checked"</span><span class="pln"> </span><span class="atn">disabled</span><span class="pun">=</span><span class="atv">"disabled"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"primaryradio4"</span><span class="tag">&gt;&lt;label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"primaryradio4"</span><span class="tag">&gt;</span><span class="pln">禁用</span><span class="tag">&lt;/label&gt;&lt;/div&gt;</span></code></pre><p>高级外观还可以不使用 <code>&lt;input&gt;</code> 元素，在此种情况下，为 <code>.checkbox-primary</code> 或 <code>.radio-primary</code> 添加 <code>.checked</code> 类标记为选中状态，用户无法通过点击来切换选中状态，但可以通过程序手动添加或移除 <code>.checked</code> 来更改选中状态。</p><div class="example">
<div class="checkbox-primary"><label>未选中</label></div>
<div class="checkbox-primary checked"><label>选中</label></div>
<div class="radio-primary"><label>未选中</label></div>
<div class="radio-primary checked"><label>选中</label></div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"checkbox-primary"</span><span class="tag">&gt;&lt;label&gt;</span><span class="pln">未选中</span><span class="tag">&lt;/label&gt;&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"checkbox-primary checked"</span><span class="tag">&gt;&lt;label&gt;</span><span class="pln">选中</span><span class="tag">&lt;/label&gt;&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"radio-primary"</span><span class="tag">&gt;&lt;label&gt;</span><span class="pln">未选中</span><span class="tag">&lt;/label&gt;&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"radio-primary checked"</span><span class="tag">&gt;&lt;label&gt;</span><span class="pln">选中</span><span class="tag">&lt;/label&gt;&lt;/div&gt;</span></code></pre></article></section></div>
</section>
{/block}